<template>
	<section>
		<!--start 面包屑-->
		<div class="location">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
				<el-breadcrumb-item>设置</el-breadcrumb-item>
				<el-breadcrumb-item>新增</el-breadcrumb-item>
			</el-breadcrumb>
			<!--start 右侧帮助组件    可选！！-->
			<!--<help-components>
				<span slot="headtext">表名称列表</span>
				<p slot="headDescText">表名称列表</p>
				<div slot="helpContentWrap">
				</div>
			</help-components>-->
			<!--end 右侧帮助组件-->
		</div>
		<!--end 面包屑-->
		<!--start content-->
		<div class="wrap" ref="companyWrap">
			<el-form :model="formData" :rules="rules" ref="form" label-width="100px" class="formFontSizeMini scroll">
				
				<div class="title">模块一</div>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="文本框" prop="textRule_input">
							<el-input v-model="formData.textRule_input" placeholder="此文本框不能为空"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="文本框">
							<el-input v-model="formData.text_input" placeholder="无校验的文本框"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				
				<div class="title">模块二</div>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="手机号" prop="mobilePhone_input">
							<el-input v-model="formData.mobilePhone_input" placeholder="请输入手机号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="数字框" prop="number_input">
							<el-input v-model="formData.number_input" placeholder="请输入数字"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="文本框" prop="textRule1_input">
							<el-input v-model="formData.textRule1_input" placeholder="输入字数最多20"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				
				<div class="title">模块三</div>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="状态">
							<el-select class="selectWidth" v-model="formData.state_select" placeholder="请选择状态">
								<el-option label="状态一" value="1"></el-option>
								<el-option label="状态二" value="2"></el-option>
								<el-option label="状态三" value="3"></el-option>
								<el-option label="状态四" value="4"></el-option>
								<el-option label="状态五" value="5"></el-option>
								<el-option label="状态六" value="6"></el-option>
								<el-option label="状态七" value="7"></el-option>
								<el-option label="状态八" value="8"></el-option>
								<el-option label="状态九" value="9"></el-option>
								<el-option label="状态十" value="10"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="16">
						<el-form-item label="区域">
							<el-cascader 
								class="selectWidth" 
								popper-class="area_cascader" 
								placeholder="请选择区域"
								:options="vue_detailedAreaList" 
								@change="areaChangeFn" 
								v-model="formData.area_select" 
								:clearable="true"
								:change-on-select="true"
								:props="vue_areaProps">
							</el-cascader>
						</el-form-item>
					</el-col>
				</el-row>
				
				<div class="title">模块四</div>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="头像">
							<el-upload
							  class="avatar-uploader avatar-uploader_95"
							  :action="vue_uploadUrl"
							  :show-file-list="false"
							  :data="vue_logoLoad.uploadData"
							  :on-success="handleLogoSuccess"
							  :on-error="handleLogoError"
							  :before-upload="beforeLogoUpload">
							  <img v-if="vue_logoLoad.ImgShow" :src="formData.logoImgSrc" class="avatar" height="95" width="auto">
							  <i v-else class="avatar-uploader-icon" :class="{'el-icon-plus':!vue_logoLoad.uploading,'el-icon-loading':vue_logoLoad.uploading}"></i>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
				
				<div class="title">模块五</div>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="身份证" class="persZh clearfix" style="height:146px">
							<div class="certificate fl">
			   		 			<el-upload
			   		 				ref="certificate"
									:action="vue_uploadUrl"
									list-type="picture-card"
									:data="vue_certificateLoad.updata"
									
								    :before-upload="beforeAvatarUpload"
									:on-preview="handlePictureCardPreview"
									:on-remove="handleRemove"
									:on-success="chenggong"
									:on-error="shibai"
									
									:disabled="vue_certificateLoad.disa">
									<i class="el-icon-plus"></i>
								</el-upload>
			   		 			<el-dialog v-model="vue_certificateLoad.dialogVisible" size="tiny">
								  <img width="100%" :src="formData.certificateImgSrc" alt="">
								</el-dialog>
			   		 		</div>
			   		 		<div class="">
			   		 			<img src="../../../img/u676.png" />
			   		 		</div>
						</el-form-item>
					</el-col>
				</el-row>
				
				<div class="title">模块六</div>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="密码" prop="password_input">
							<el-input type="password" v-model.trim="formData.password_input" placeholder="请输入密码"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="密码强度">
						<div :class="vue_pass_intensity">
	   		 				<span class="intensitySpan vue_weak">弱</span>
	   		 				<span class="intensitySpan vue_intermediate">中</span>
	   		 				<span class="intensitySpan vue_strong">强</span>
   		 				</div>
   		 			</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="确认密码" prop="passwordAff_input">
							<el-input type="password" v-model="formData.passwordAff_input" placeholder="请确认密码"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				
				<div class="title">模块七</div>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="多选">
							<el-checkbox-group v-model="formData.checkbox_value">
			                  <el-checkbox label="商品标签一" value="1" name="1" key="1"></el-checkbox>
			                  <el-checkbox label="商品标签二" value="2" name="2" key="2"></el-checkbox>
			                  <el-checkbox label="商品标签三" value="3" name="3" key="3"></el-checkbox>
			                  <el-checkbox label="商品标签四" value="4" name="4" key="4"></el-checkbox>
			                </el-checkbox-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="文本域">
							<el-input type="textarea" v-model="formData.compantRemark" placeholder=""></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				
				<div class="title">模块八</div>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="单选">
							<el-radio-group v-model="formData.radio_value">
								<el-radio class="radio" label="1">选项一</el-radio>
								<el-radio class="radio" label="2">选项二</el-radio>
								<el-radio class="radio" label="3">选项三</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="邮箱" prop="email_input">
							<el-input v-model="formData.email_input" placeholder="输入邮箱"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div class="btnBox_180" :class="{btnBox_98:!$store.state.headFold}">
			<el-button type="primary" @click="updateCompanyMsgFn">保存</el-button>
			<el-button @click="cancelFn">取消</el-button>
		</div>
		<!--end content-->
	</section>
</template>

<script>
	import * as companyMsgDatas from '../../../assets/data/companyMsgData';  //引入地区数据
	import helpComponents from '../../../components/help/help'    //引入右侧帮助组件 可选！！
	export default {
		components:{helpComponents},
		data() {
			var mobileRule = (rule, value, callback) => {
				if(!value) {
					return callback(new Error('手机不能为空'));
				}
				if(/^(13[0-9]|14[57]|15[012356789]|177|18[012356789])\d{8}$/.test(value)) {
					callback();
				} else {
					callback(new Error('手机号码格式不正确'));
				}
			};
			var numberRule = (rule, value, callback) => {
				if(!/^\d*$/.test(value)) {
					callback(new Error('请输入数字'));
				}else{
					callback();
				}
			};
			var passwordRule = (rule, value, callback) => {
				if(!/^[a-zA-Z0-9]{6,20}$/.test(value)) {
					callback(new Error('密码为6-20位字母或数字！'));
				}else{
					callback();
				}
			};
			var passwordAffRule = (rule, value, callback) => {
				if(value!=this.formData.password_input) {
					callback(new Error('两次输入的密码不一致！'));
				}else{
					callback();
				}
			};
			return {
				//form的数据
				formData:{
					textRule_input:"",  //非空校验的文本框
					text_input:"",  //无校验的文本框
					mobilePhone_input:"",  //手机号校验
					number_input:"",  //数字类型校验
					textRule1_input:"",  //长度限制的文本框
					state_select:"",  //下拉选择
					area_select:[],  //区域的级联选择，这里的类型须为array
					logoImgSrc:"",  //头像上传
					certificateImgSrc:"",  //身份证上传
					password_input:"",  //password
					passwordAff_input:"",  //确认密码
					checkbox_value:[],  //chcekbox
					radio_value:"",  //radio
					compantRemark:"",  //文本域
				},
				//form控件的校验,注意，rules的校验属性名要跟控件上绑定的变量名一致，并且两者不能属于同个对象下，如a.formData和a.rules!!
				rules: {
					textRule_input: [{required: true,message: '此文本框不能为空',trigger: 'blur'}],  //非空校验
					mobilePhone_input:[{required: true,validator: mobileRule,trigger: 'blur'}],  //手机号校验
					number_input:[{required: false,validator: numberRule,trigger: 'blur'}],  //数字类型校验
					textRule1_input:[{required: true,min:0,max:20,message: '字数最多为20',trigger: 'blur'}],  //长度为20的校验
					password_input:[{required: true,validator: passwordRule,trigger: 'blur'}],  //密码校验
					passwordAff_input:[{required: true,validator: passwordAffRule,trigger: 'blur'}],  //密码确认校验
				},
				//区域的数据
				vue_detailedAreaList:[],  
				//区域的属性
				vue_areaProps: {
					value: 'treeCode',
					children: 'children',
					label: 'treeName'
				},
				//上传
				vue_uploadUrl:"admin/ftpAjax!uploadFile.htm",
				vue_logoLoad:{
					uploadData:{
						"moduleName":"basic",
						"fileName":""
					},
					uploading:false,
					ImgShow:false,
				},
				vue_certificateLoad:{
					uploadData:{
						"moduleName":"basic",
						"fileName":""
					},
	        		dialogVisible:false,
	        		disa:false,
				},
				//密码强度
				vue_weak:"",  //弱
				vue_intermediate:"",  //中
				vue_strong:"",  //强
				vue_pass_intensity:"",
			}
		},
		methods: {
			//选择区域时触发
			areaChangeFn(vuale) {
				//console.log(vuale)
			},
			// uploadLOGO 
			beforeLogoUpload(file) {
				this.vue_logoLoad.uploading = true;
		      	this.vue_logoLoad.ImgShow = false;
		      	this.uploadData.uploadData.fileName = file.name;
		      	
				const isJPG = file.type === 'image/jpeg';
		        const isPNG = file.type === 'image/png';
		        const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG&&!isPNG) {
					this.uploading = false;
			      	this.canUpload = true;
		        	this.Public.openError(this,"上传头像图片只能是 JPG和PNG 格式!")
		        } 
				if(!isLt2M) {
					this.uploading = false;
			      	this.canUpload = true;
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return (isPNG || isJPG) && isLt2M;
			},
			handleLogoSuccess(res, file , fileList) {
				this.vue_logoLoad.uploading = false;
		      	this.vue_logoLoad.ImgShow = true;
				this.formData.logoImgSrc = res.accessUrl;
			},
			handleLogoError(err, file , fileList){
				this.vue_logoLoad.uploading = false;
		      	this.vue_logoLoad.ImgShow = !!this.formData.logoImgSrc;
		      	this.Public.openError(this,"LOGO上传失败");
			},
			//上传证件
			beforeAvatarUpload(file) {
				this.vue_certificateLoad.uploading = true;
		      	this.vue_certificateLoad.ImgShow = false;
		      	this.vue_certificateLoad.uploadData.fileName = file.name;
		      	
				this.certificateImg1.uploading = true;
		      	this.certificateImg1.canUpload = false;
		      	this.certificateImg1.updata.fileName = file.name;
		      	
				const isJPG = file.type === 'image/jpeg';
		        const isPNG = file.type === 'image/png';
		        const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG&&!isPNG) {
					this.certificateImg1.uploading = false;
			      	this.certificateImg1.canUpload = true;
		        	this.Public.openError(this,"上传身份证图片只能是 JPG和PNG 格式!")
		        } 
				if(!isLt2M) {
					this.certificateImg1.uploading = false;
			      	this.certificateImg1.canUpload = true;
					this.$message.error('上传身份证图片大小不能超过 2MB!');
				}
				return (isPNG || isJPG) && isLt2M;
			},
			
			
		    handleRemove(file, fileList) {
		        this.disa='';
		    },
//放大图片正面
		    handlePictureCardPreview(file) {
		        this.certificateImg1.imgSrc = file.url;
		        this.certificateImg1.dialogVisible = true;
		
		    },
//上传成功正面
		    chenggong(res, file, fileList){
				this.certificateImg1.uploading = false;
		      	this.certificateImg1.canUpload = true;
				this.certificateImg1.imgSrc = res.accessUrl;
		      	if (file.status) {
		      		this.disa='100';
		      	}
		    },
//上传失败正面
			shibai(err, file , fileList){
				this.certificateImg1.uploading = false;
		      	this.certificateImg1.canUpload = true;
		      	this.Public.openError(this,"身份证上传失败");
			},
			handleAvatarProgress1(event, file, fileList){
				
			},
			handleAvatarChange1(file, fileList){

			},
			/* end 身份证正面 */
			
			updateCompanyMsgFn() {
				this.$refs.dataForm.validate((valid) => {
					if(valid) {
						//form表单验证通过
					} else {
						//form表单验证未通过
						return false;
					}
				});

			},
			cancelFn() {
				this.$router.go(-1)
			}
		},
		created() {
			/*请求地区 */
			this.vue_detailedAreaList = companyMsgDatas.areaData;
			
			/* 请求职位 */
			this.axios({
				method:"post",
				url:"/admin/basicDdlistAjax!queryAll.htm",
				params:{
					"ddtypeCode":"00100000004"
				}
			}).then((res)=>{
				if(res.data.state==res.data.success){
					this.companyMsgData.operatorPositionList = res.data.basicDdlistViewVoList
				}else{
					
				}
			}).catch((error)=>{
				//console.log(error.response.status)
			})
			/* 
			/* 请求接口获取信息 */
			this.axios({
				method: "post",
				url: "/admin/memberCompanyAjax!queryViewVo.htm"
			}).then((res) => {
				if(res.data.state == res.data.success) {
					this.companyMsgData.companyName = res.data.memberCompanyViewVo.companyName || ""; // 公司名称
					this.companyMsgData.companyIndustry = res.data.memberCompanyViewVo.companyIndustry || ""; //行业类别
					this.companyMsgData.detailedArea = res.data.memberCompanyViewVo.areaCode.split(",") || ["00", "36", "3601"]; //所在地区
					this.companyMsgData.companyAddress = res.data.memberCompanyViewVo.companyAddress || ""; //公司详细地址
					this.companyMsgData.companyPostcode = res.data.memberCompanyViewVo.companyPostcode || ""; //邮编
					this.companyMsgData.companyPhone = res.data.memberCompanyViewVo.companyPhone || ""; //公司电话
					this.companyMsgData.companyFax = res.data.memberCompanyViewVo.companyFax || ""; //公司传真
					this.companyMsgData.compantRemark = res.data.memberCompanyViewVo.compantRemark || ""; //公司介绍
					this.companyMsgData.companyWeb = res.data.memberCompanyViewVo.companyWeb || ""; //公司网址
					this.companyMsgData.companyInvoiceTaxId = res.data.memberCompanyViewVo.companyInvoiceTaxId || ""; //纳税人识别码
					this.companyMsgData.companyInvoiceTitle = res.data.memberCompanyViewVo.companyInvoiceTitle || ""; //发票抬头

					this.companyMsgData.operatorName = res.data.memberOperatorViewVo.operatorName || ""; //联系人
					this.companyMsgData.operatorPosition = res.data.memberOperatorViewVo.operatorPosition || ""; //联系人职位名称
					this.companyMsgData.operatorPhone = res.data.memberOperatorViewVo.operatorPhone || ""; //手机号码
					this.companyMsgData.operatorQq = res.data.memberOperatorViewVo.operatorQq || ""; //qq号码
					this.companyMsgData.operatorEmail = res.data.memberOperatorViewVo.operatorEmail || ""; //联系人邮箱
				} else {

				}
			}).catch((error) => {
				//				console.log(error.response.status)
			});
			

		},
		mounted() {
			this.$refs['form'].$el.style.height = (document.documentElement.clientHeight - 175) + 'px';

		}
	}
</script>

<style scoped>
	*{transition:.2s;}
	section {display: flex;flex-direction: column;flex: 1;}
	div.location {flex: 0 0 10px; padding: 3px 0 15px 0;}
	div.wrap {position: relative;flex: 1;width: 100%;padding: 15px 20px 0 20px;box-sizing: border-box;background: #fff;}
	.scroll {overflow-y: auto;overflow-x: hidden;padding-right: 10px;}
	.title {height: 50px;color: #03B8CC;font-size: 16px;}
	.selectWidth {width: 100%;}
	.btnBox_180 {position: absolute;bottom: 10px;left:180px;height: 50px;background: #fff;z-index: 100;}
	.btnBox_98 {left:98px;}
	/* start upload */
	.avatar-uploader_95{width:95px}
	.avatar-uploader {position: relative;border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;overflow: hidden;z-index: 9;}
	.avatar-uploader:hover {border-color: #03B8CC;}
	.avatar-uploader-icon {font-size: 20px;color: #8c939d;width: 95px;height: 95px;line-height: 95px;text-align: center;}
	.certificate {width:372px;}
	/* end upload */
	.intensitySpan{display: inline-block;width: 120px; height: 20px;line-height: 20px;text-align: center!important;background: #e9ecf3;color: #fff;margin-right: 3px!important;font-size: 13px;}
</style>
